<template>
  <div class="shop_wrap">
    <!-- 导航栏，显示标题“物品详情”，带有返回箭头，点击返回箭头时调用 back 方法 -->
    <van-nav-bar title="物品详情" left-arrow @click-left="back" />
    <div class="shopxxqq">
      <!-- 轮播图组件，设置自动播放间隔为3000毫秒，指示器颜色为白色 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="orange">
        <!-- 遍历 imgs 数组，为每个图片生成一个轮播图项 -->
        <van-swipe-item v-for="(item, index) in imgs" key="index"><img :src="item" alt="" /></van-swipe-item>
      </van-swipe>
      <!-- 显示商品价格，价格数值从 detdata2.goods_info.price 中获取 -->
      <div class="prii">￥<span>{{ detdata2.goods_info.price }}</span></div>
      <!-- 显示商品标题，标题从 detdata2.goods_info.title 中获取 -->
      <div class="titl">
        {{ detdata2.goods_info.title }}
      </div>
      <!-- 展示商品保障信息的区域，使用 flex 布局并设置背景色和圆角 -->
      <div style="
          display: flex;
          justify-content: space-around;
          margin-top: 20px;
          background-color: #fcf5e3;
          border-radius: 20px;
        ">
        <!-- 正品保障信息 -->
        <p style="color: #81542b">
          <span><van-icon name="shield-o" /></span>正品保障
        </p>
        <!-- 分隔线 -->
        <p style="color: #999">|</p>
        <!-- 隐私发货信息 -->
        <p style="color: #81542b">
          <span><van-icon name="shield-o" /></span>隐私发货
        </p>
        <!-- 分隔线 -->
        <p style="color: #999">|</p>
        <!-- 专业药师信息 -->
        <p style="color: #81542b">
          <span><van-icon name="shield-o" /></span>专业药师
        </p>
        <!-- 分隔线 -->
        <p style="color: #999">|</p>
        <!-- 官网直供信息 -->
        <p style="color: #81542b">
          <span><van-icon name="shield-o" /></span>官网直供
        </p>
      </div>

      <!-- 商品详细信息区域，使用 flex 布局 -->
      <div class="attention">
        <!-- 产品介绍部分 -->
        <div class="cid">
          <img src="https://mall.miaoshoucdn.com/mobile/images/cd_icon02.png?v=v3.9.2">
          <div class="at">产品介绍</div>
          <div class="ain">
            <!-- 产品介绍内容，从 detdata2.drug_desc.main_function 中获取 -->
            {{ detdata2.drug_desc.main_function }}
          </div>
        </div>
        <!-- 分隔符 -->
        <li></li>
        <!-- 用法用量部分 -->
        <div class="cid">
          <img src="https://mall.miaoshoucdn.com/mobile/images/cd_icon03.png?v=v3.9.2">
          <div class="at">用法用量</div>
          <div class="ain">
            <!-- 用法用量内容，从 detdata2.drug_desc.use_method 中获取 -->
            {{ detdata2.drug_desc.use_method }}
          </div>
        </div>
        <!-- 分隔符 -->
        <li></li>
        <!-- 服用禁忌部分 -->
        <div class="cid">
          <img src="https://mall.miaoshoucdn.com/mobile/images/cd_icon04.png?v=v3.9.2">
          <div class="at">服用禁忌</div>
          <div class="ain">
            <!-- 服用禁忌内容，从 detdata2.drug_desc.contraindications 中获取 -->
            {{ detdata2.drug_desc.contraindications }}
          </div>
        </div>
      </div>
      <!-- 订单相关信息区域，包括已选商品和运费信息 -->
      <div class="mail">
        <!-- 已选商品信息 -->
        <div class="cd">
          已选&nbsp;<span>{{ detdata2.goods_info.title }},1{{ detdata2.drug_desc.package }}</span>
        </div>
        <!-- 运费信息 -->
        <div class="post">
          运费&nbsp;<span>{{ detdata2.express_info.express_tip }}</span>
        </div>
      </div>
      <!-- 额外展示图片的区域 -->
      <div class="wimgs">
        <!-- 遍历 imgs 数组，为每个图片生成一个展示项 -->
        <div v-for="(item, index) in imgs" key="index">
          <p>
            <img :src="item" alt="" />
          </p>
        </div>
      </div>
    </div>
    <footer>
      <!-- 底部操作栏 -->
      <van-action-bar>
        <!-- 首页按钮，带有小红点 -->
        <van-action-bar-icon icon="wap-home-o" text="首页" dot @click="$router.push({ path: '/home' })" />
        <!-- 客服按钮 -->
        <van-action-bar-icon icon="contact-o" text="客服" @click="$router.push({ path: '/customer' })" />
        <!-- 商品清单按钮，点击跳转到购物车页面 -->
        <van-action-bar-icon icon="send-gift-o" text="商品清单" @click="goCart" />
        <!-- 加入购物车按钮，点击调用 joincart 方法 -->
        <van-action-bar-button type="warning" text="加入购物车" @click="joincart" />
        <!-- 立即购买按钮，点击调用 gosubmit 方法 -->
        <van-action-bar-button type="danger" text="立即购买" @click="gosubmit" />
      </van-action-bar>
    </footer>
  </div>
</template>

<script lang="ts" setup>
import "./index.css"
// 导入必要的 Vue 函数
import { ref, onMounted, onBeforeMount } from 'vue'
// 导入路由相关函数
import { useRoute, useRouter } from 'vue-router'
// 导入 axios 用于发送 HTTP 请求
import axios from 'axios'

// 获取当前路由信息
const route = useRoute()
// 获取路由实例，用于导航
const router = useRouter()
// 从路由参数中获取商品 ID
const id = route.query.id

// 定义响应式数据，用于存储商品不同部分的详细信息
const detdata1 = ref({})
const detdata2 = ref({})
const detdata3 = ref({})
// 定义响应式数据，用于存储商品图片列表
const imgs = ref([])

// 获取商品规格信息的异步函数
const getDetail1 = async () => {
  console.log(id)
  // 发送 GET 请求获取商品规格信息
  await axios.get(`/v1/mall/shop_spu/specification_info/?shop_spu_id=${id}`).then((res) => {
    console.log(res.data.data)
    // 将获取到的数据存储到 detdata1 中
    detdata1.value = res.data.data
    console.log(detdata1.value, 1)
  })
}

// 获取商品基本详情信息的异步函数
const getDetail2 = async () => {
  console.log(id)
  // 发送 GET 请求获取商品基本详情信息
  await axios.get(`/v1/mall/shop_spu/detail/base/?shop_spu_id=${id}`).then((res) => {
    console.log(res.data.data)
    // 将获取到的数据存储到 detdata2 中
    detdata2.value = res.data.data
    console.log(detdata2.value, 2)
    // 从 detdata2 中提取商品图片列表并存储到 imgs 中
    imgs.value = detdata2.value.swiper_info.img_list
    console.log(imgs.value)
  })
}

// 获取商品尾部详情信息的异步函数
const getDetail3 = async () => {
  console.log(id)
  // 发送 GET 请求获取商品尾部详情信息
  await axios.get(`/v1/mall/shop_spu/detail/tail/?shop_spu_id=${id}`).then((res) => {
    console.log(res.data.data)
    // 将获取到的数据存储到 detdata3 中
    detdata3.value = res.data.data
    console.log(detdata3.value, 3)
  })
}

// 将商品加入购物车的函数
const joincart = () => {
  // 从本地存储中获取购物车列表，如果不存在则初始化为空数组
  const cartlist = JSON.parse(localStorage.getItem('cartlist')) || []
  // 检查购物车中是否已存在该商品
  const atlist = cartlist.find(item => item.id == id)
  if (atlist) {
    console.log(1);
    // 如果存在，增加该商品的数量
    cartlist.forEach((value, index) => {
      if (value.id == atlist.id) {
        value.num++
        // 更新本地存储中的购物车列表
        localStorage.setItem('cartlist', JSON.stringify(cartlist))
        return
      }
    })
  } else {
    console.log(2);
    // 如果不存在，将该商品添加到购物车列表的开头
    cartlist.unshift({
      id: id,
      num: 1,
      price: detdata2.value.goods_info.price,
      title: detdata2.value.goods_info.title,
      img: imgs.value[0],
      state: false
    })
    // 更新本地存储中的购物车列表
    localStorage.setItem('cartlist', JSON.stringify(cartlist))
    console.log(cartlist);
  }
}

// 跳转到购物车页面的函数
const goCart = () => {
  router.push('/cart')
}

// 跳转到订单页面的函数
const gosubmit = () => {
  // 模拟id
  const orderId = Date.now().toString();
  axios
    .get("/api/pay", {
      params: {
        id: orderId,
        price: detdata2.value.goods_info.price,
      },
    })
    .then((res) => {
      if (res.data.code == 200) {
        window.open(res.data.result);
      }
    });

}

// 在组件挂载前执行的生命周期钩子函数
onBeforeMount(() => {
  // 调用获取商品不同部分详细信息的函数
  getDetail1()
  getDetail2()
  getDetail3()
})

// 返回上一页的函数
const back = () => {
  router.push('/shop')
}
</script>
